<template>
  <div>
    <h1>Home</h1>
    <div>
      <!-- 
          声明式路由导航,使用router-link组件,其实router-link组件内部也是使用的router.push进行导航
          所以to属性接受的参数就是push方法接受的location参数
          有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
          replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
          active-class:设置链接激活时使用的 CSS 类名
       -->
      <router-link active-class="active" tag="button" to="/home/news" replace
        >新闻</router-link
      >
      <router-link
        active-class="active"
        replace
        tag="button"
        :to="{
          path: '/home/play',
        }"
        >娱乐</router-link
      >
      <router-link
        active-class="active"
        replace
        tag="button"
        :to="{
          name: 'music',
        }"
        >音乐</router-link
      >
    </div>
    <keep-alive include="News,Play">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
.active {
  background: skyblue;
}
</style>
